@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Poppins:wght@300;400;600&display=swap&family=Oleo+Script&family=Poppins:wght@300;400;600&display=swap');

/*
Yellow: #c79835
black: #1c1a1d
*/

/*--------------------------------------
            GENERAL RULES
--------------------------------------*/
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    background-color: rgba(235, 226, 226, 0.418);
}


h1{
    font-family: 'Montserrat';
    font-size: 45px;
    font-weight: 600;
    line-height: 1.2em;
    color: #1c1a1d;  
}

h2{
    font-family: 'Montserrat';
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2em;
    color: #1c1a1d;  
}

h3{
    font-family: 'Montserrat';
    font-size: 31px;
    font-weight: 600;
    line-height: 1.2em;
    color: #1c1a1d; 
}

h4{
    font-family: 'Montserrat';
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
    color: #1c1a1d; 
}

p{
    font-family: 'Poppins';
    font-size: 21px;
    font-weight: 300;
    line-height: 1.4em;
    color: #1c1a1d; 
}

.standard-section{
    width: 100vw; 
    padding: 30px 5vw; 
}

.fullwidth-section{
    width: 100vw; 
    padding: 20px;  
}

.section-title{
    margin-bottom: 20px; 
}

.primary-btn{
    cursor: pointer;
    background-color: #c79835;
    border: none; 
    padding: 20px 35px; 
    border-radius: 100px;
}

.white-text{
    color: #ebe2e2;
}

/*--------------------------------------
                CARDS
--------------------------------------*/
.card-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card{
    margin-bottom: 30px; 
    border-radius: 10px; 
    min-height: 100px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    display: flex;
    flex-direction: column;
    background-color: #fff; 
}

.two-card-row .card{
    width: 45%; 
}

.three-card-row .card{
    width: 30%; 
}

/*------ card images -------*/
.card-image{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px 10px 0px 0px;
}

/*------ card text -------*/
.card-textarea{
    width: 100%; 
    height: 100%; 
    padding: 20px; 
    text-align: justify;
}

.card-title{
    font-size: 31px;
    margin: 8px 0 12px 0;  
    text-align: center;
}

.card-subtitle{
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    margin: 10px 0; 
}

.card-textarea p{
    margin-top: auto;
    margin-bottom: auto; 
}

/*------ card button -------*/
.card-btn{
    width: 50%; 
    margin: 0 auto 25px auto; 
    transition: .3s;
    text-decoration: none;
    color: #222; 
}

.card-btn p{
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    transition: .3s; 
}

.card-btn:hover{
    transform: scale(1.1);
    transition: .3s;
}

.card-btn p:hover{
    letter-spacing: 3px;
}

.margin{
    margin-top: 265px;
}

/*------ media query -------*/
@media (max-width: 960px){

    .two-card-row .card{
        width: 90vw; 
    }

    .three-card-row .card{
        width: 90vw; 
    }

    .card-textarea p {
        text-align: left;
    }

    .card-btn{
        width: 65%; 
    }

    .margin{
        margin-top: 20px; 
    }

}

/*--------------------------------------
                PARTNERS
--------------------------------------*/
.partners{
    background-color: #29166f;
}

.partners-container{
    width:  100%; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.partner{
    max-width: 48%;
    height: var(--height);
    margin-bottom: 40px;
    min-width: 250px; 
}


/*--------------------------------------
            ANIMATIONS
--------------------------------------*/
.slideInFromLeft{
    animation: .8s ease-in-out var(--delay) 1 slideInFromLeft;
    /*animation: timing | easing | delay | animation count | @keyframe */
}

.slideInFromRight{
    animation: .9s ease-in-out var(--delay) 1 slideInFromRight;
    /*animation: timing | easing | delay | animation count | @keyframe */
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
}


/*--------------------------------------
        EVENTO FRASSICA DE SANTIS
--------------------------------------*/
.front-page-container{
    width: 100vw; 
    text-align: center;
}

.front-page{
    width: 90vw;  
    margin-top: 30px;
}

.eventi, .biglietti{
    width: 100vw; 
    height: auto;
    padding: 20px; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.evento, .biglietto{
    width: 45%; 
    min-width: 350px;
    margin-bottom: 50px; 
    display: flex;
    flex-direction: column;
}

.date{
    color: red;
}

.main-title{
    font-family: 'Oleo Script';
    margin: 30px 0; 
    font-size: 150px;
    background: -webkit-linear-gradient( #c79835, #f59207);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 930px){
    .main-title{
        font-size: 100px;
    }
}

@media (max-width: 780px){
    .main-title{
        font-size: 80px;
    }
}

@media (max-width: 500px){
    .main-title{
        font-size: 50px;
    }
}

@media (max-width: 340px){
    .main-title{
        font-size: 40px;
    }
}

.dove{
    width: 100vw; 
}

.map{
    margin-left: auto; 
    margin-right: auto; 
    border:1px dashed grey; 
    margin-bottom: 20px; 
    display: block;
}

.button{
    display: block;
    width: 40%; 
    text-decoration: none;
    background-color: #c79835;
    padding: 25px 35px;
    margin: 30px auto; 
    font-family: 'Poppins';
    font-size: 35px;
    color: #1c1a1d; 
    border-radius: 100px; 
    animation: scaleDown .3s;
}

@media (max-width: 720px){
    .button{
        width: 60%;
    }
}

@media (max-width: 470px){
    .button{
        width: 80%;
        border-radius: 80px; 
        font-size: 25px;
        padding: 15px 20px; 
    }
}

.button:hover{
    animation: scaleUp .3s; 
    transform: scale(1.1);
}

@keyframes scaleUp {
    0%{
        transform: scale(1);
    }    
    100%{
        transform: scale(1.1);
    }
}

@keyframes scaleDown {
    0%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }    
}

#eventi, #dove, #quando, #biglietti{
    height: 80px;
    display: block;  
}

.disco-store{
    max-width: 90%; 
}

@media (max-width: )